<template>
    <div>
        <top></top>
        <div class="main-content detail">
          <div class="item-content">
              <div class="title-main">
                  <div class="title-text">
                      <span style="">产品详情</span>
                  </div>
                  <div class="title-content">
                      <hr class="title-line1"/>
                      <hr class="title-line2"/>
                  </div>
              </div>
              <div class="top-main">
                  <div class="top-row">
                      <div style="float: left">
                          <div style="font-size: 24px"><strong>{{product.name}}</strong></div>
                          <div style="float: left">
                              <div class="row-box">连连通用户专享</div>
                              <div class="row-box" style="margin-left: 7px">
                                门槛低 额度高
                              </div>
                          </div>
                      </div>
                      <div class="row-btn">
                          <el-button class="base-btn" style="width: 200px"
                                     :disabled="!product.fundCode" type="warning"
                                     @click="actionByCreditStatus(product)">
                            {{btnText}}
                          </el-button>
                      </div>
                  </div>
                  <div class="top-row">
                      <div class="row-item">
                          <div class="item-text" style="">最高额度</div>
                          <div style="font-size: 14px;color: #FFA01D">
                              <span style="font-size: 28px">{{ vMoney.decode((product.quota/10000),0)}}</span>万
                          </div>
                      </div>
                      <div class="row-item">
                          <div class="item-text">月利率低至</div>
                          <div style="font-size: 14px;">
                            <span style="font-size: 18px">{{product.productCode==zsProductCode?'<':''}}</span>
                            <span style="font-size: 28px">{{ ((product.interestRate/12)*10).toFixed(2)}}</span>‰
                          </div>
                      </div>
                      <div class="row-item">
                          <div class="item-text">借款周期</div>
                          <div style="font-size: 14px;" v-if="product.deadLineType=='0'">
                            <span style="font-size: 28px">{{product.deadLine}}</span>个月
                          </div>
                          <div v-else>
                            <span style="font-size: 28px">{{product.deadLine}}</span>日
                          </div>
                      </div>
                      <div class="row-item">
                          <div class="item-text">授信有效期</div>
                          <div>
                              <span style="font-size: 28px;">{{product.creditIndate}}</span>个月
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="item-content" style="margin-top: 10px">
              <div class="title-main">
                  <div class="title-text">
                      <span style="">产品解读</span>
                  </div>
                  <div class="title-content">
                      <hr class="title-line1"/>
                      <hr class="title-line2"/>
                  </div>
              </div>
              <div class="top-main">
                  <div v-html="detailInfos"></div>
              </div>
              <div class="bottom-main">
                  <el-button :disabled="!product.fundCode"
                             type="warning" class="base-btn det-btn"
                             @click="actionByCreditStatus(product)">
                    {{btnText}}
                  </el-button>
              </div>
          </div>
        </div>
    </div>
</template>

<script>
	import {mapState} from 'vuex'
	import Top from '@/components/layout/top';
	import Msg from '../../components/common/alert/msg';
  import {queryCreditApplyStep,creditApplyStatus} from '@/api/authen/agreed';
	export default {
		data() {
			return {
				btnText: "立即申请",
				product: {

        },
				detailInfos: {},
				detailInfo: {
          desc:"",
          features:[],
          conditions:[],
          data:"",
          process:[]
        },
        steps:null,
        applySteps:'',

        nbProductCode:process.env.NB_CODE,
        zsProductCode:process.env.ZS_CODE,
			};
		},
		filters: {
			addZero: function (data) {
				return data.toFixed(0)
			}
		},
		components: {
			Top,Msg
		},
		computed: mapState({
			user(state) {
				return state.user;
			}
		}),
    mounted() {
      this.product = this.$route.query;
      if(this.product.fundCode){
        this.detailInfos = this.product.productDetail;
        this.setBtnTitle();
      }
    },
    methods:{
      actionByCreditStatus(){
        let _ = this;
        if(this.steps=='5'){
          this.step5();
        }else if(this.steps == '6'){//授信过期
          //this.creditOrNotAction();
          if (this.product.productCode == this.zsProductCode) {
            this.goToCreditStep();
          }else if (this.product.productCode == this.nbProductCode) {
            this.$router.push({
              path: '/plat'
            });
          }
        } else{
          this.goToCreditStep();
        }
      },
      step5(){
        if(this.applySteps){
          if(this.applySteps == 'step7'){
            this.$router.push({
              path: '/plat'
            });
          }else{
            this.goToCreditStep();
          }
        }else{
          this.$message.error('您已申请其他银行产品，暂不支持申请多家！');
        }
      },
      goToCreditStep(){
        this.$router.push({
          path: '/creditStep',
          query: {
            code: this.product.fundCode,
            productCode: this.product.productCode
          }
        });
      },
      //3状态没有了、21数据过期
      setBtnTitle(){
        let _ = this;
        let id = this.user.user.id?this.user.user.id:'';
        queryCreditApplyStep(id).then(res=>{
          if(res.code==200){
            if (res.data) {
              _.steps = res.data;
              switch (_.steps) {
                case "0":
                case "1":
                case "2":
                case "3":
                case "21":
                case "4":
                  _.btnText = '立即申请';
                  break;
                case "5":
                  _.queryCreditedStatus();
                  break;
                case "6":
                  _.btnText = (this.product.productCode == this.zsProductCode)?'重新申请':'已过期';
                  break;
              }
            }
          }
        });
      },
      /***
       * 授信状态
       * step1.建档  step2.授权 step3授信 step4开户 step5授信完成 step6 失败
       */
      queryCreditedStatus(){
        let _ = this;
        let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';
        let productCode = this.$route.query.productCode?this.$route.query.productCode:'';
        creditApplyStatus({
          "fundCode": this.product.fundCode,
          "uscCode": uscCode,
          "productCode":productCode
        }).then(response => {
          if (response.code == 200) {
            if(response.data){

              if(response.data.step == 'step1'){
                _.btnText = (productCode == process.env.ZS_CODE)?'建档中':'审核中';
              } else if(response.data.step == 'step2'){
                _.btnText = '授权中';
              } else if(response.data.step == 'step3'){
                _.btnText = (productCode == process.env.ZS_CODE)?'授信中':'待签约';
              } else if(response.data.step == 'step4'){
                _.btnText =  (productCode == process.env.ZS_CODE)?'等待开户':'已签约';
              } else if(response.data.step == 'step5'){
                _.btnText = '已签约';
              } else if(response.data.step == 'step6'){
                _.btnText = '审核失败';
              } else if(response.data.step == 'step7'){
                _.btnText = '去支用';
              }
              _.applySteps = response.data.step;
            }
          }

        });
      }
    }
	}
</script>

<style lang="scss">
    .detail {
        font-size: 14px;
        background-color: #f8f8f8;

        .item-content {
            background-color: #fff;
            width: 1200px;
            margin: 0 auto;
            padding: 20px;
            .title-main {
                padding: 10px 0px;
                .title-text {
                    font-size: 16px;
                    color: #666
                }
                .title-content {
                    width: 100%;
                    height: 28px;
                    .title-line1 {
                        border: none;
                        height: 4px;
                        width: 120px;
                        float: left;
                        background-color: #FFA01D;
                        margin-top: 10px;
                    }
                    .title-line2 {
                        border: none;
                        height: 1px;
                        width: 1040px;
                        float: left;
                        background-color: #bbb;
                        margin-top: 12px;
                    }
                }
            }
            .top-main {
                width: 950px;
                margin-left: 120px;
                padding-top: 20px;
                .top-row {
                    width: 950px;
                    height: 80px;
                }
                .row-box {
                    float: left;
                    background-color: #FCE7C9;
                    border: 1px solid #F0932D;
                    color: #F0932D;
                    padding: 1px 5px;
                    font-size: 12px
                }
                .row-btn {
                    width: 200px;
                    height: 40px;
                    float: right
                }
                .row-item {
                    float: left;
                    width: 120px;
                }
                .item-text {
                    font-size: 14px;
                    color: #666
                }
                .item-sub {
                    float: left;
                    width: 120px;
                    font-size: 14px;
                    color: #666;
                }
                .text-title {
                    font-size: 18px;
                    color: #333;
                    margin-top: 30px;
                }
                .text-sub {
                    font-size: 14px;
                    color: #666
                }
            }

            .bottom-main{
              width: 200px;
              height: 40px;
              margin: 80px auto 40px auto;
              .det-btn{
                width: 200px;
              }
            }
        }
    }
</style>
